<template>
	<view class="uv-tabbar">
		<view
			class="uv-tabbar__content"
			ref="uv-tabbar__content"
			@touchmove.stop.prevent="noop"
			:class="[border && 'uv-border-top', fixed && 'uv-tabbar--fixed']"
			:style="[tabbarStyle]"
		>
			<view class="uv-tabbar__content__item-wrapper">
				<uv-tabbar-item :text="item.text" v-for="(item, index) in tabbarList" :key="index" 
				@click="gojump(item)">
					<template v-slot:active-icon>
						<image class="icon" :src="item.selectedIconPath"></image>
					</template>
					<template v-slot:inactive-icon>
						<image class="icon" :src="item.iconPath"></image>
					</template>
				</uv-tabbar-item>
			</view>

			<uv-safe-bottom v-if="safeAreaInsetBottom"></uv-safe-bottom>
		</view>
		<view
			class="uv-tabbar__placeholder"
			v-if="placeholder"
			:style="{
				height: placeholderHeight + 'px'
			}"
		></view>
	</view>
</template>

<script>
import mpMixin from '@/uni_modules/uv-ui-tools/libs/mixin/mpMixin.js';
import mixin from '@/uni_modules/uv-ui-tools/libs/mixin/mixin.js';
import props from './props.js';
// #ifdef APP-NVUE
const dom = uni.requireNativePlugin('dom');
// #endif
/**
 * Tabbar 底部导航栏
 * @description 此组件提供了自定义tabbar的能力。
 * @tutorial https://www.uvui.cn/components/tabbar.html
 * @property {String | Number}	value				当前匹配项的name
 * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
 * @property {Boolean}			border				是否显示上方边框（默认 true ）
 * @property {String | Number}	zIndex				元素层级z-index（默认 1 ）
 * @property {String}			activeColor			选中标签的颜色（默认 '#1989fa' ）
 * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
 * @property {Boolean}			fixed				是否固定在底部（默认 true ）
 * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
 * @property {Object}			customStyle			定义需要用到的外部样式
 *
 * @example <uv-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><uv-tabbar-item text="首页" icon="home" dot ></uv-tabbar-item></uv-tabbar>
 */
export default {
	name: 'uv-tabbar',
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			placeholderHeight: 0,
			children: [],
			tabbarList: [
				{
					pagePath: '/pages/index/index',
					iconPath: '/static/tabbar/index_a.png',
					selectedIconPath: '/static/tabbar/index.png',
					text: '首页'
				},
				{
					pagePath: '/pages/activity/index',
					iconPath: '/static/tabbar/activity_a.png',
					selectedIconPath: '/static/tabbar/activity.png',
					text: '活动'
				},
				{
					pagePath: '/pages/community/community',
					iconPath: '/static/tabbar/community_a.png',
					selectedIconPath: '/static/tabbar/community.png',
					text: '社区'
				},
				{
					pagePath: '/pages/user/user',
					iconPath: '/static/tabbar/user_a.png',
					selectedIconPath: '/static/tabbar/user.png',
					text: '我的'
				}
			]
		};
	},
	computed: {
		values() {
			return this.$store.getters.messageNum;
		},
		tabbarStyle() {
			const style = {
				zIndex: this.zIndex
			};
			// 合并来自父组件的customStyle样式
			return this.$uv.deepMerge(style, this.$uv.addStyle(this.customStyle));
		},
		// 监听多个参数的变化，通过在computed执行对应的操作
		updateChild() {
			return [this.value, this.activeColor, this.inactiveColor];
		},
		updatePlaceholder() {
			return [this.fixed, this.placeholder];
		}
	},
	watch: {
		updateChild() {
			// 如果updateChildren中的元素发生了变化，则执行子元素初始化操作
			this.updateChildren();
		},
		updatePlaceholder() {
			// 如果fixed，placeholder等参数发生变化，重新计算占位元素的高度
			this.setPlaceholderHeight();
		}
	},
	mounted() {
		// uni.hideTabBar()
		this.setPlaceholderHeight();
	},
	methods: {
		gojump(i) {
			uni.switchTab({
				url: i.pagePath
			});
		},
		updateChildren() {
			// 如果存在子元素，则执行子元素的updateFromParent进行更新数据
			this.children.length && this.children.map((child) => child.updateFromParent());
		},
		// 设置用于防止塌陷元素的高度
		async setPlaceholderHeight() {
			// if (!this.fixed || !this.placeholder) return
			// 延时一定时间
			await this.$uv.sleep(20);
			// #ifndef APP-NVUE
			this.$uvGetRect('.uv-tabbar__content').then(({ height = 50 }) => {
				// 修复IOS safearea bottom 未填充高度
				this.placeholderHeight = height;
				uni.setStorageSync('height', this.placeholderHeight);
			});
			// #endif

			// #ifdef APP-NVUE
			dom.getComponentRect(this.$refs['uv-tabbar__content'], (res) => {
				const { size } = res;
				this.placeholderHeight = size.height;
			});
			// #endif
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/uni_modules/uv-ui-tools/libs/css/variable.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/components.scss';
@import '@/uni_modules/uv-ui-tools/libs/css/color.scss';

.uv-tabbar {
	@include flex(column);
	flex: 1;
	justify-content: center;
	&__content {
		@include flex(column);
		background-color: #fff;
		box-shadow: 0rpx 2rpx 10rpx 0rpx rgba(0, 0, 0, 0.2);
		border-radius: 10rpx;
		&__item-wrapper {
			height: 50px;
			@include flex(row);
		}
	}

	&--fixed {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 9;
		webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
	}
	.uv-tabbar__content__item-wrapper {
		.icon {
			width: 50rpx;
			height: 50rpx;
		}
	}
}
</style>
